<#include "layout/layout.ftl">
<@layout title="日常" canonical="${blog_url!}" >
	<div id="page" class="timeline">
		<main class="site-main" id="main">
			<div class="comment-list">
          <#list journals.content as journal>
						<div class="media my-media">
							<div class="tree-hole-box">
								<div class="tree-hole-author"
										 style="margin-bottom:10px;border-radius:30px;background:#f1f3f3;height:60px;width:280px;">
									<img class="avatar" style="border-radius:50%;float:left" src="${user.avatar!}"
											 alt="${user.nickname!}" width="60"
											 height="60"/>
									<div>
										<a style="margin-left:8px;color:#1890FF;line-height: 60px;float: left" href="${blog_url!}"
											 data-ajax
											 rel="external nofollow">${user.nickname}</a>
										<p style="line-height: 60px;"> 于${journal.createTime?string('yyyy年MM月dd日')}</p>
									</div>
								</div>
                  ${journal.content!}
							</div>
						</div>
          </#list>
			</div>

			<div class="comment-page" style="margin-top: 25px;">
          <#if journals.totalPages gt 1>
						<div class="card card-transparent">
							<nav class="pagination is-centered" role="navigation" aria-label="pagination">
                  <@paginationTag method="journals" page="${journals.number}" total="${journals.totalPages}" display="3">
										<div class="pagination-previous<#if pagination.hasPrev><#else > is-invisible is-hidden-mobile</#if>">
											<a class="is-flex-grow has-text-black-ter" href="${pagination.prevPageFullPath!}"
												 data-ajax>上一页</a>
										</div>
										<div class="pagination-next<#if pagination.hasNext><#else > is-invisible is-hidden-mobile</#if>">
											<a class="is-flex-grow has-text-black-ter" href="${pagination.nextPageFullPath!}"
												 data-ajax>下一页</a>
										</div>
										<ul class="pagination-list is-hidden-mobile">
                        <#list pagination.rainbowPages as number>
                            <#if number.isCurrent>
															<li><a class="pagination-link is-current" href="${number.fullPath!}"
																		 data-ajax>${number.page!}</a></li>
                            <#else>
															<li><a class="pagination-link" href="${number.fullPath!}"
																		 data-ajax>${number.page!}</a></li>
                            </#if>
                        </#list>
										</ul>
                  </@paginationTag>
							</nav>
						</div>
          </#if>
			</div>
		</main>
	</div>
</@layout>